<template>
	<!-- 	<view class="my-tabbar">
		<view :class="{act: act == 'index'}" @click="goNav('/pages/index/index')">
			<image v-if="act == 'index'" src="@/static/index.png"></image>
			<image v-else src="@/static/index-df.png"></image>
			<text>任务列表</text>
		</view>
		<view :class="{act: act == 'my'}" @click="goNav('/pages/my/index')">
			<image v-if="act == 'my'" src="@/static/my.png"></image>
			<image v-else src="@/static/my-df.png"></image>
			<text>我的</text>
		</view>
	</view> -->
	<u-tabbar :value="act" :fixed="true" @change="changeTabBar" :placeholder="true" activeColor="#1ABEAB"
		inactiveColor="#909399" zIndex="999" :border="false" :safeAreaInsetBottom="true">
		<u-tabbar-item text="任务列表">
			<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/index.png"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/index-df.png"></image>
		</u-tabbar-item>
		<u-tabbar-item text="我的">
			<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/my.png"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/my-df.png"></image>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script>
	export default {
		name: "my-tabbar",
		data() {
			return {

			};
		},
		props: {
			act: {
				type: String | Number,
				default: "index"
			},
		},
		methods: {
			// goNav(url) {
			// 	uni.switchTab({
			// 		url
			// 	})
			// },
			changeTabBar(index) {
				console.log(index);
				switch (index) {
					case 0:
						uni.switchTab({
							url: "/pages/index/index"
						})
						break;
					case 1:
						uni.switchTab({
							url: "/pages/my/index"
						})
						break;
				}
			},
		}
	}
</script>

<style lang="scss">
	.u-page__item__slot-icon {
		width: 46rpx;
		height: 46rpx;
	}

	// .my-tabbar {
	// 	position: fixed;
	// 	bottom: 0;
	// 	left: 0;
	// 	width: 100%;
	// 	height: 122rpx;
	// 	background: #FDFDFD;
	// 	border-radius: 16rpx 16rpx 0 0;
	// 	display: flex;
	// 	flex-direction: row;
	// 	align-items: center;

	// 	view {
	// 		width: 100%;
	// 		height: 78rpx;
	// 		line-height: 78rpx;
	// 		display: flex;
	// 		flex-direction: row;
	// 		justify-content: center;
	// 		align-items: center;
	// 		position: relative;

	// 		image {
	// 			width: 48rpx;
	// 			height: 48rpx;
	// 			margin-right: 16rpx;
	// 		}

	// 		text {
	// 			font-size: 32rpx;
	// 			color: #909399;
	// 		}

	// 		&.act {
	// 			text {
	// 				color: #30D6C2;
	// 			}
	// 		}

	// 		&:nth-child(1) {
	// 			&:before {
	// 				content: "";
	// 				width: 2rpx;
	// 				height: 78rpx;
	// 				background: #EFEFEF;
	// 				position: absolute;
	// 				right: 0;
	// 				top: 0;
	// 			}
	// 		}
	// 	}
	// }
</style>